<template>
  <div>
    <div>
      <el-form ref="ruleForm" label-position="top" label-width="60px">
        <p class="fxyj_h">
          <el-radio-group v-model="ruleForm.radioBtn" @change="handleClick">
            <!-- <el-radio label="6">未来6h</el-radio>
            <el-radio label="12">未来12h</el-radio> -->
            <el-radio label="24">未来24h</el-radio>
          </el-radio-group>
        </p>
        <p class="datesech">
           <span class="sechsp">降雨时段</span>
          <el-form-item label="" style="margin:0px 0 5px 0">
            <el-date-picker
              v-model="ruleForm.TimeRain"
              prefix-icon="el-icon-date"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 99%"
              range-separator="至"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :default-time="[timebeg, timeend]"
              @change="selectTime(ruleForm.TimeRain)"
            />
            <!-- <span class="sechbtn" @click.stop="selectTime(ruleForm.TimeRain)"><i class="el-icon-search"></i></span> -->
          </el-form-item>
        </p>
      </el-form>
    </div>
    <div class="collapse_table">
      <ul>
        <li
          v-for="(item, index) in FxyjList"
          :key="index"
          :class="{ activeList: selectNum == index }"
          @click="ListStyle(item, index)"
        >
          <p><span class="borfan"><span class="bor"></span></span>预警时间：<span>{{ item.waringTime | dateformat }}</span></p>
          <p><span class="borfan"><span class="bor"></span></span>预警时段：<span style="letter-spacing: -1px">{{ item.rainStart | dateformat }} - {{ item.rainEnd | dateformat }} </span></p>
          <p><span class="borfan"><span class="bor"></span></span>最大雨格雨量：<span>{{ item.maxRain || 0 }}mm</span></p>
        </li>
        <infinite-loading
          ref="infiniteLoading"
          direction="100"
          @infinite="infiniteHandler"
        >
          <span slot="no-more">  &nbsp; &nbsp; </span>
          <template v-if="FxyjList.length <=0">
            <div slot="no-results" class="noData">当前无风险预警</div>
          </template>
          <div v-else slot="no-results"> &nbsp; &nbsp;</div>
        </infinite-loading>
      </ul>
    </div>
  </div>
</template>
<script>
import { GetEarlyWarningList } from '@/api/xuna.js'
import { mapGetters } from 'vuex'
// 风险预警模块
import YJ_QX_ZQ from '../../../../map/cesium/mixins/YJ_QX_ZQ'
// 风险范围模块
import YJ_QX_FW from '../../../../map/cesium/mixins/YJ_QX_FW'
// 预报降雨模块
import rainPrediction from '@/map/cesium/mixins/rainPrediction'
export default {
    components: {
    },
    mixins: [YJ_QX_ZQ, YJ_QX_FW, rainPrediction],
    data() {
        return {
            dlgName: '',
            selectNum: -1,
            timebeg: this.$moment(this.$store.getters.startTimeCommon).format('HH:mm:ss'),
            timeend: this.$moment(this.$store.getters.endTimeCommon).format('HH:mm:ss'),
            ruleForm: {
                TimeRadio: '',
                radioBtn: '24',
                TimeRain: [this.$store.getters.startTimeCommon, this.$store.getters.endTimeCommon]
            },
            DatalIst: {
                wswscd: '',
                dtBegin: this.$store.getters.startTimeCommon,
                dtEnd: this.$store.getters.endTimeCommon,
                iStep: '24',
                page: '1',
                limit: '10'
            },
            FxyjList: []
        }
    },
    computed: {
        ...mapGetters({
            basin: 'basin'
        })
    },
    watch: {
        'basin': {
            immediate: true,
            deep: true,
            handler(val) {
                this.DatalIst.wswscd = val
                this.resetList()
            }
        }

    },
    created() {
        this.$store.dispatch('rightFold', true)
    },
    methods: {
        // 加载更多
        infiniteHandler($state) {
            this.getData($state)
        },
        // 重置
        resetList() {
            this.DatalIst.page = 1
            this.FxyjList = []
            this.$nextTick(() => {
                this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
            })
        },
        // 自定义时间
        selectTime(val) {
            if (val) {
                this.DatalIst.dtBegin = val[0]
                this.DatalIst.dtEnd = val[1]
                this.ruleForm.TimeRain = val
                this.$store.dispatch('startTimeCommon', val[0])
                this.$store.dispatch('endTimeCommon', val[1])
                this.resetList()
            }
        },
        // 搜索查询
        handleClick(val) {
            this.DatalIst.iStep = val
            this.resetList()
        },
        // 点击左侧列表项
        ListStyle(item, index) {
            // 传时间
            this.$eventBus.$emit('TK_Date_Card_Click', {
                perioD_END: item.waringTime,
            })
            
            this.selectNum = index
            this.$eventBus.$emit('fxyjEvent', { strWscd: this.DatalIst.wswscd, ...item })
            this.$eventBus.$emit('EB_YB_Mesh_CardSel', { id: item.id, step: this.DatalIst.iStep })
            this.$store.dispatch('closePop')
            this.$store.dispatch('closePopStay')
            this.$store.dispatch('rightFold', false)
        },
        // 获取数据
        getData($state) {
            this.clearFXZQ()
            GetEarlyWarningList(this.DatalIst).then((res) => {
                if (res.isSuccess) {
                    if ($state) {
                        if (!res.data.length > 0) {
                            // console.log(!res.data.length > 0)
                            // console.log(this.FxyjList.length)
                            $state.complete() // 加载完成的状态
                            if (this.FxyjList.length === 0) {
                                this.$parent.$parent.$parent.infoTrue = false
                                this.$store.dispatch('rightFold', true)
                            }
                        } else {
                              this.$eventBus.$emit('TK_Date_Card_Click', {
                                perioD_END:  res.data[0].waringTime,
                            })
                            const arr = res.data
                            this.FxyjList = [...this.FxyjList, ...arr]
                            if (res.data.length < this.DatalIst.limit) {
                                $state.complete() // 加载完成的状态
                            } else {
                                $state.loaded() // 加载中的状态
                            }
                            // console.log(this.FxyjList)
                            if (this.DatalIst.page === 1) {
                                this.selectNum = 0
                                // 风险详情（右侧村庄预警统计及村庄预警详情）
                                this.$eventBus.$emit('fxyjEvent', { strWscd: this.DatalIst.wswscd, ...res.data[0] })
                                this.$emit('buttonEvent') //右侧面板
                                // 降雨预报 网格
                                this.$eventBus.$emit('EB_YB_Mesh_CardSel', { id: res.data[0].id, step: this.DatalIst.iStep })
                                this.$store.dispatch('rightFold', false)
                            }
                        }
                        this.DatalIst.page++
                    } else {
                        this.FxyjList = res.data
                        // $state.complete()   //加载完成的状态
                    }
                } else {
                    this.$message.error(res.message)
                    $state.complete() // 加载完成的状态
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.fxyj_h {
  margin: 8px 0px;
  text-align: left;
  /deep/ .el-radio-group{
    justify-content:flex-start;
    .is-checked{
     background:none;
     .el-radio__inner{
        border: 4px solid #409EFF;
     }
    }
    .el-radio__inner{
      background-color:#fff;
    }
     .el-radio__inner::after{
      background-color:#fff;
    }
  }
  .el-radio{
    display: inline-block;
    width:25%;
    margin:0px;
    background:none;
   
    
    // margin:0px 2px;
  }
  
}
.collapse_table {
  max-height: calc(100vh - 300px);
  width:calc(100% + 10px);
  padding-right:5px;

}
.isShowtopflg {
  .collapse_table {
    max-height: calc(100vh - 240px);
 }

}

.el-radio-group{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-left:0px;
}
.datesech{
 .sechsp{
   display:inline-block;
   margin-bottom:5px;
   font-size: 14px;
   color:#fff;
   opacity: 0.8;
 }
  .el-input__inner{
   border: solid 1px #1E73DC;
   background-color:#00377B;
   
  }
  .sechbtn{
    display: inline-block;
    width:14%;
    height:33px;
    margin-left:1%;
    border-radius: 6px;
    background-color:#1E73DC;
    font-size:18px;
    text-align: center;
    color:#fff;
    box-sizing: border-box;
    line-height: 34px;
    cursor: pointer;

  }
}
.borfan{
  display: inline-block;
  position: relative;
  left:-6px;
  width: 10px;
  height: 10px;
  border: 1px solid #00FFFF;
  box-sizing: border-box;
  .bor{
  position: absolute;
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #00FFFF;
  top:2px;
  left:2px;
  }
}


</style>
